<template>
  <section id="tag">
    <div class="box2">
      <div class="page page1">{{tag[0]}}<br>{{tag[1]}}<br>{{tag[2]}}</div>
      <div class="page page2">{{tag[3]}}<br>{{tag[4]}}<br>{{tag[5]}}</div>
      <div class="page page3">{{tag[6]}}<br>{{tag[7]}}<br>{{tag[8]}}</div>
      <div class="page page4">{{tag[9]}}<br>{{tag[10]}}<br>{{tag[11]}}</div>
      <div class="page page5">{{tag[12]}}<br>{{tag[13]}}<br>{{tag[14]}}</div>
      <div class="page page6">{{tag[15]}}<br>{{tag[16]}}<br>{{tag[17]}}</div>
    </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      tag: ['JavaScript', 'Vue', 'React', 'Angular', 'webpack', '跨域', '服务端渲染', 'Koa', 'CSS3', 'HTML5', 'ES6', 'HTTP', 'MySQL', 'MongoDB', 'leetcode', '性能', 'Git']
    }
  }
}
</script>

<style lang="less" scoped>
#tag {
  position: relative;
  width: 100%;
  height: 100%;

  .box2 {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 20%;
    top: 15%;
    transform-style: preserve-3d;
    /* perspective: 1000px; */
    animation: rotate 10s ease-in-out 1s infinite alternate;

    @keyframes rotate {
      0% {
        transform: rotate3d(0, 0, 0, 90deg);
        transform-origin: center;
      }
      25% {
        transform: rotate3d(1, 1, 0, 90deg);
        transform-origin: center;
      }
      50% {
        transform: rotate3d(1, 1, 0, 180deg);
        transform-origin: center;
      }
      75% {
        transform: rotate3d(1, 1, 0, 270deg);
        transform-origin: center;
      }
      100% {
        transform: rotate3d(1, 1, 0, 360deg);
        transform-origin: center;
      }
    }
    .page {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 1px solid #eaecef;
      text-align: center;
      font-size: 30px;
      font-weight: 400;
      line-height: 2;
    }
    .page2 {
      transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 90deg);
      transform-origin: left;
      color: red;
    }
    .page3 {
      transform: translate3d(0, -100%, 0) rotate3d(1, 0, 0, 90deg);
      transform-origin: bottom;
      color: green;
    }
    .page4 {
      transform: translate3d(-100%, 0, 0) rotate3d(0, 1, 0, -90deg);
      transform-origin: right;
      color: pink;
    }
    .page5 {
      transform: translate3d(0, 100%, 0) rotate3d(1, 0, 0, -90deg);
      transform-origin: top;
      color: purple;
    }
    .page6 {
      transform: translate3d(0, 0, -200px) rotate3d(1, 1, 0, 180deg);
      transform-origin: center;
      color: blue;
    }
    .page1,
    .page2,
    .page3,
    .page4,
    .page5,
    .page6 {
      background-color: #fff;
    }
  }
}
</style>